<template>
	<view class="container">
		<u-form :error-type="errorType" class="form" :model="form" :rules="rules" ref="uForm">
			<view class="form-item f-sb">
				<view class="form-label">设置跟投比例</view>
				<view class="form-right f-bc">
					<u-form-item :border-bottom="false" prop="proportion">
						<view class="my_form_item">
							<view class="my_form_input">
								<input class="my_input" v-model="ratioValue" @click="showRatioSelect = true" disabled
									placeholder="请选择跟投比例" />
								<!-- <u-input v-model="ratioValue" @click="showRatioSelect = true" disabled placeholder="请选择跟投比例"></u-input> -->
								<u-select v-model="showRatioSelect" title="选择跟投比例" mode="single-column"
									@confirm="ratioSelectCallback" :list="ratioList"></u-select>
							</view>
							<view class="form-remark uni-icon" @click="getRemark(1)">&#xe505;</view>
						</view>
					</u-form-item>
				</view>
			</view>
			<!-- ===================================================== -->
			<view class="form-item f-sb">
				<view class="form-label">跟单合约种类</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="futures_info">
						<view class="my_form_item">
								<u-button v-model="form.futures_info" @click="form.show = true"
									:disabled="form.futures_info_checked" class="form-input"
									:class="form.futures_info_checked ? 'disabled' : ''" type="digit" placeholder="">
									自定义跟单合约
								</u-button>
								<view class="form-remark uni-icon" @click="getRemark(0)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.futures_info_checked" @change="setInput('futures_info')" size="32">
						</u-switch>
					</u-form-item>
					<u-popup mode="bottom" v-model="form.show">
						<view class="item-box">
							<view class="f-content-1">
								<u-checkbox-group @change="checkboxGroupChange">
									<u-checkbox class="item" :class="[item.active ? 'active' : '']"
										@change="checkboxChange" v-model="item.checked"
										v-for="(item, index) in form.checkboxList" :key="index"
										:name="item.product_code">
										{{ item.product }}
									</u-checkbox>
								</u-checkbox-group>
							</view>
							<view>
								<u-button class="f-content" type='default' size="medium" @click="btnCancle">取消
								</u-button>
								<u-button class="f-content" type='primary' size="medium" @click="form.show = false">确定
								</u-button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>
			<!-- ===================================================== -->
			<view class="form-item f-sb">
				<view class="form-label">最大复制单量</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="max_copy_order">
						<view class="my_form_item">
							<input class="form-input my_input" v-model="form.max_copy_order"
								:disabled="form.max_copy_order_checked"
								:class="form.max_copy_order_checked ? 'disabled' : ''" type="digit" placeholder="" />
							<!-- <u-input v-model="form.max_copy_order" :disabled="form.max_copy_order_checked" class="form-input" :class="form.max_copy_order_checked ? 'disabled' : ''" type="digit" placeholder="" /> -->
							单<view class="form-remark uni-icon" @click="getRemark(2)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.max_copy_order_checked" @change="setInput('max_copy_order')" size="32">
						</u-switch>
					</u-form-item>
				</view>
			</view>
			<view class="form-item f-sb">
				<view class="form-label">最大交易手数</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="max_proportion">
						<view class="my_form_item">
							<input v-model="form.max_proportion" :disabled="form.max_proportion_checked"
								class="form-input my_input" :class="form.max_proportion_checked ? 'disabled' : ''"
								type="digit" placeholder="" />
							<!-- <u-input v-model="form.max_proportion" :disabled="form.max_proportion_checked" class="form-input" :class="form.max_proportion_checked ? 'disabled' : ''" type="digit" placeholder="" /> -->
							手<view class="form-remark uni-icon" @click="getRemark(3)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.max_proportion_checked" @change="setInput('max_proportion')" size="32">
						</u-switch>
					</u-form-item>
				</view>
			</view>
			<view class="form-item f-sb">
				<view class="form-label">最小交易手数</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="min_proportion">
						<view class="my_form_item">
							<input v-model="form.min_proportion" :disabled="form.min_proportion_checked"
								class="form-input my_input" :class="form.min_proportion_checked ? 'disabled' : ''"
								type="digit" placeholder="" />
							手<view class="form-remark uni-icon" @click="getRemark(4)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.min_proportion_checked" @change="setInput('min_proportion')" size="32">
						</u-switch>
					</u-form-item>
				</view>
			</view>
			<view class="form-item f-bc">
				<view class="form-label">是否开启反向跟投</view>
				<view class="form-right f-bc" style="flex-direction: row;">
					<u-form-item class="form-switch" label-width="120" :border-bottom="false">
						<u-switch v-model="form.inversion" size="32"></u-switch>
					</u-form-item>
					<view class="form-remark uni-icon" @click="getRemark(5)">&#xe505;</view>
				</view>
			</view>
			<view class="form-item f-sb">
				<view class="form-label">强平线</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="compel_close">
						<view class="my_form_item">
							<input v-model="form.compel_close" :disabled="form.compel_close_checked"
								class="form-input my_input" :class="form.compel_close_checked ? 'disabled' : ''"
								type="digit" placeholder="" />
							<view class="form-remark uni-icon" @click="getRemark(6)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.compel_close_checked" @change="setInput('compel_close')" size="32">
						</u-switch>
					</u-form-item>
				</view>
			</view>
			<view class="form-item f-sb">
				<view class="form-label">连亏再跟</view>
				<view class="form-right f-sb">
					<u-form-item :border-bottom="false" prop="loss_frequency">
						<view class="my_form_item">
							<input v-model="form.loss_frequency" :disabled="form.loss_frequency_checked"
								class="form-input my_input" :class="form.loss_frequency_checked ? 'disabled' : ''"
								type="digit" placeholder="" />
							<view class="form-remark uni-icon" @click="getRemark(7)">&#xe505;</view>
						</view>
					</u-form-item>
					<u-form-item class="form-switch" label="无限制" label-width="120" :border-bottom="false">
						<u-switch v-model="form.loss_frequency_checked" @change="setInput('loss_frequency')" size="32">
						</u-switch>
					</u-form-item>
				</view>
			</view>
		</u-form>
		<view class="form-tool">
			<u-button class="form-btn" type="primary" @click="submit()">完成设置</u-button>
		</view>
		<u-modal v-model="showModel" :title="modalTitle">
			<view class="modal-title" v-if="modelCount === 1">如:设置为200%，则策略师下1手，您的账户会跟进2手。</view>
			<view class="modal-title" v-if="modelCount === 2">如:设置为10单，则您的期货账户同时持仓这个信号源的10张交易单，未满10单时才会跟进后续单子。</view>
			<view class="modal-title" v-if="modelCount === 3">当按比例计算出来的手数大于最大交易手数时，会以最大交易手数入场。</view>
			<view class="modal-title" v-if="modelCount === 4">当按比例计算出来的手数小于最小交易手数时，会以最小交易手数入场。</view>
			<view class="modal-title" v-if="modelCount === 5">如:勾选"反向跟投"后，该策略师推送的每一条交易信号，您的交易账户都会反向生成一笔相同的交易单。</view>
			<view class="modal-title" v-if="modelCount === 6">当持仓单亏损超过该值后，系统将强制全部平仓，此处应填写最大亏损金额，单位:元。</view>
			<view class="modal-title" v-if="modelCount === 7">当信号源连续亏损X次后，再进行跟随，如设置0，表示无限制。</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		postStrategyRule,
		getTradeStrategyFutures
	} from '@/api/member.js'
	export default {
		data() {
			return {
				ids: [],
				ratioList: [{
						label: '30%',
						value: 30
					},
					{
						label: '50%',
						value: 50
					},
					{
						label: '100%',
						value: 100
					},
					{
						label: '200%',
						value: 200
					},
					{
						label: '300%',
						value: 300
					},
				],
				ratioValue: '100%',
				showRatioSelect: false,
				form: {
					proportion: '100', // 跟投比例
					checkboxList: [],
					futuresInfoList: [],
					futures_info: '', //跟单合约种类
					futures_info_checked: true,
					show: false,
					max_copy_order: '', // 最大复制单量 默认 -1 无限制
					max_copy_order_checked: true,
					max_proportion: '', // 最大交易手数 -1 无限制
					max_proportion_checked: true,
					min_proportion: '', // 最小交易手数 -1 无限制
					min_proportion_checked: true,
					inversion: false, // 开启反向交易 信号源买用户卖 信号源卖用户买 默认不开启 状态 0 开启 1
					compel_close: '', //	强平线 默认 -1 无限制
					compel_close_checked: true,
					loss_frequency: '', // 连亏再跟 默认 -1 无限制
					loss_frequency_checked: true
				},
				rules: {
					proportion: [{
						required: true,
						message: '请设置跟投比例'
					}],
					max_copy_order: [{
						validator: (rule, value, callback) => {
							if (value === '' && !this.form.max_copy_order_checked) {
								callback(new Error('请设置最大复制单量'));
							}
							callback()
						}
					}],
					max_proportion: [{
						validator: (rule, value, callback) => {
							if (value === '' && !this.form.max_proportion_checked) {
								callback(new Error('请设置最大交易手数'));
							}
							callback()
						}
					}],
					min_proportion: [{
						validator: (rule, value, callback) => {
							if (value === '' && !this.form.min_proportion_checked) {
								callback(new Error('请设置最小交易手数'));
							}
							callback()
						}
					}],
					compel_close: [{
						validator: (rule, value, callback) => {
							if (value === '' && !this.form.compel_close_checked) {
								callback(new Error('请设置强平线'));
							}
							callback()
						}
					}],
					loss_frequency: [{
						validator: (rule, value, callback) => {
							if (value === '' && !this.form.loss_frequency_checked) {
								callback(new Error('请设置连亏再跟'));
							}
							callback()
						}
					}],
				},
				errorType: ['toast'],
				showModel: false,
				modelCount: 1,
				modalTitle: ''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(option) {
			// this.ids = option.ids.split(',')
		},
		created() {
			this.tradeStrategyFutures();
		},
		methods: {
			getRemark: function(num) {
				switch (num) {
					case 0:
						this.modalTitle = '合约种类'
						break;
					case 1:
						this.modalTitle = '跟投比例'
						break;
					case 2:
						this.modalTitle = '最大复制单量'
						break;
					case 3:
						this.modalTitle = '最大交易手数'
						break;
					case 4:
						this.modalTitle = '最小交易手数'
						break;
					case 5:
						this.modalTitle = '反向跟投'
						break;
					case 6:
						this.modalTitle = '强平线'
						break;
					case 7:
						this.modalTitle = '连亏再跟'
						break;
				}
				this.modelCount = num;
				this.showModel = true;
			},
			// 选择switch开关
			setInput: function(name) {
				this.form[name] = ''
				if (name == 'futures_info' && this.form.futures_info_checked) {
					this.form.checkboxList.map(val => {
						val.checked = false;
					})
				}
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.form.checkboxList.map(val => {
					if (val.product_code == e.name)
						val.active = e.value;
				})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.form.futuresInfoList = e;
			},
			btnCancle() {
				this.form.show = false;
				this.form.futuresInfoList = []
				this.form.futures_info_checked = true;
				this.form.checkboxList.map(val => {
					val.checked = false;
					val.active = val.checked;
				})
			},
			tradeStrategyFutures() {
				getTradeStrategyFutures().then(res => {
					if (res.code === 200) {
						this.form.checkboxList = res.data;
						this.form.checkboxList.map(val => {
							val.active = false;
						})
					}
				})
			},
			// 选择跟投比例
			ratioSelectCallback: function(data) {
				this.ratioValue = data[0].label
				this.form.proportion = data[0].value
			},
			submit: function() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let data = {
							proportion: '',
							max_copy_order: -1,
							max_proportion: -1,
							min_proportion: -1,
							inversion: 0,
							compel_close: -1,
							loss_frequency: -1
						}
						let formData = this.form
						Object.keys(data).map(v => {
							if (formData[v]) {
								data[v] = formData[v]
								if (v === 'inversion') {
									data[v] = 1
								}
							}
						})
						let reqData = {
							data,
							ids: this.ids,
						}
						uni.showLoading()
						postStrategyRule(reqData).then(res => {
							uni.hideLoading()
							if (res.code === 200) {
								uni.showToast({
									title: res.data,
									icon: 'none',
									duration: 1500
								})
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none',
									duration: 1500
								})
							}
						}).catch(err => {
							uni.hideLoading()
							uni.showToast({
								title: err.message,
								icon: 'none',
								duration: 1500
							})
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_form_item {
		display: flex;
		align-items: center;
		margin-top: -20rpx;
	}

	.my_form_input {
		height: 68rpx;
		border: 1px solid #CCCCCC;
		padding-left: 20rpx;
		position: relative;
	}

	.my_input {
		height: 68rpx;
		line-height: 68rpx;
	}

	.my_form_input::after {
		content: "";
		position: absolute;
		right: 20rpx;
		top: 26rpx;
		border-top: 15rpx solid #CCCCCC;
		border-left: 15rpx solid transparent;
		border-right: 15rpx solid transparent;
		border-bottom: 20rpx solid transparent;
	}

	.container {
		height: 100vh;
		position: relative;
		background-color: #ffffff;

		.form {
			padding: 16rpx 24rpx;

			.f-content-1 {
				margin-top: 10rpx;
			}

			.f-content {
				margin: 10rpx;
				margin-left: 100rpx;
			}

			.f-sb {
				display: flex;
				justify-content: space-between;
			}

			.f-bc {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.u-form-item {
				padding: 0;
			}

			.form-item {
				padding: 16rpx 24rpx;
				flex-direction: row;
				border-bottom: 1px solid #e6e6e6;

				&:last-child {
					border-bottom: none;
				}

				.form-label {
					width: 240rpx;
					line-height: 72rpx;
				}

				.form-right {
					flex: 1;
					flex-direction: column;

					.form-input {
						flex: 1;
						margin-right: 16rpx;
						border: 1px solid #cccccc;
						// padding: 0 16rpx !important;
						border-radius: 6rpx;
					}

					.disabled {
						background-color: #EEEEEF;
					}

					.form-remark {
						color: #999;
						font-size: 56rpx;
						margin-left: 16rpx;
					}
				}
			}
		}

		.form-tool {
			width: 60%;
			margin: 0 auto;
			margin-bottom: 20rpx;
			.form-btn {
				width: 600rpx;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 28rpx;
				background-color: #1296DB;
				color: #ffffff;
			}
		}

		.modal-title {
			font-size: 28rpx;
			padding: 40rpx 30rpx;
			color: #999;
		}

		.item-box {
			margin-bottom: 20 rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				// border: 1px solid $u-type-primary-disabled;
				color: $u-type-primary;
				padding: 1rpx 0rpx;
				border-radius: 30rpx;
				margin-top: 1rpx;
			}

			.active {
				color: #FFFFFF;
				background-color: $u-type-error-disabled;
			}
		}
	}
</style>
